<template>
  <ul class="sh-upload-list">
    <li
    class="sh-upload-list-file"
    v-for="(img, i) in fileList" :key="i">
      <div v-if="img.showProgress">
        <progress :value="img.percentage" max="100" style="width: 148px;"></progress>
      </div>
      <Images
        ref="img"
        class="image-wrap"
        v-else
        :src="img.src"
        width="140"
        :preview-src-list="[img.src]" />
      <div class="img-model">
        <i class="iconfont icon-open-eyes" @click.stop="showBigImg(i)"></i>
        <i class="iconfont icon-delete" @click.stop="handleRemove(img)"></i>
      </div>
    </li>
  </ul>
</template>

<script>
import Images from '../../image'
import Icon from '../../icon'

export default {
// import引入的组件需要注入到对象中才能使用
  name: 'UploadList',
  components: {
    Icon,
    Images
  },
  props: {
    fileList: {
      type: Array
    }
  },
  data () {
    // 这里存放数据
    return {
    }
  },
  watch: {
    fileList: {
      deep: true,
      handler: function (val) {
      }
    }
  },
  // 方法集合
  methods: {
    // handleClick (file) {
    //   this.$emit('on-file-click', file)
    // },
    // handlePreview (file) {
    //   this.$emit('on-file-preview', file)
    // },
    handleRemove (item) {
      this.$emit('on-file-remove', item)
    },
    showBigImg (i) {
      this.$refs.img[i].showPreview()
    },
    showImg (item) {
      const fr = new FileReader()
      fr.readAsDataURL(item.file)// 读取文件
      fr.onload = e => {
        this.$set(item, 'src', e.target.result)
      }
    }
  }
}
</script>
